import React, { startTransition, useState, useEffect } from "react";
import { flushSync } from "react-dom";

function Component1() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState("null");

  // 高优任务: 连续点击事件
  const handleClick = () => setCount((c) => c + 1);

  // 低优任务: 数据加载 (startTransition)
  useEffect(() => {
    // const id = setInterval(() => {
    //   handleClick();
    // }, 1);

    startTransition(() => {
      setTimeout(() => {
        setData("res");
      }, 500);
      // fetchData().then(res => setData(res)); // 低优先级
    });
    // return () => {
    //   clearInterval(id);
    // };
  }, []);

  const arr = [];
  for (let i = 0; i < 66666; i++) {
    arr.push(<div>{count}</div>);
  }

  return (
    <div>
      <button onClick={handleClick}>点击</button>
      <div>{data}</div>
      <div>{arr.map((item) => item)}</div>
    </div>
  );
}
export default Component1;
